<template>
  <div v-title="'商城客户 - 世外生活运营平台'">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkStoreCustomer">

      <mk-search-component :formArr="formArr"  inputPlaceholder = "客户编号/客户名称/联系人/联系电话/店铺名称" @startSearch="fun_call_search">
        <span slot="slot_1">
            <el-button class="btn-create floatRight" type="primary" @click="openAddForm">新增客户</el-button>
        </span>
        <div  slot="slot_2" class="search-result-amount textAlignRight">
          <el-button class="btn-create floatRight" type="primary" @click="openAddForm">新增客户</el-button>
        </div>
      </mk-search-component>

      <div class="primary_bg tabContainer" v-loading="isLoading" element-loading-text="拼命加载中">
        <el-table :data="tableData.elements"
                  @row-click="openDetail">
          <el-table-column prop="number" label="客户编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="客户名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="shopName" label="店铺名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contact" label="联系人"></el-table-column>
          <el-table-column prop="contactPhone" label="联系电话" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cityName" label="所在城市" show-overflow-tooltip></el-table-column>
          <el-table-column prop="siteName" label="服务站点" show-overflow-tooltip></el-table-column>
        </el-table>

        <el-pagination v-if="tableData.totalAmount > 0"
                       :current-page="tableData.page" :total="tableData.totalAmount"
                       :page-size="tableData.size" layout="total, prev, pager, next"
                       @current-change="loadListPage"></el-pagination>
      </div>
    </div>

    </el-scrollbar>
    <!--客户详情-->
    <mk-store-customer-detail :dialog-visible="detailDialogVisible"
                              :seller-id="sellerId"
                              @closeDialog="detailDialogVisible=false"
                              @openEditForm="openEditForm"></mk-store-customer-detail>

    <!--新增、编辑客户-->
    <mk-store-customer-form :dialog-visible="formDialogVisible"
                            :is-add="isAdd"
                            :seller-detail="sellerDetail"
                            @submitSuccess="loadListPage"
                            @closeDialog="closeCustomerForm"></mk-store-customer-form>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import MkStoreCustomerDetail from'./MkStoreCustomerDetail.vue'
  import MkStoreCustomerForm from'./MkStoreCustomerForm.vue'
  import customerService from '../../../services/customer'

  export default {
    name: 'storeCustomerList',
    components: {
      MkBreadcrumb, MkStoreCustomerDetail, MkStoreCustomerForm
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
//      provinceAndCity: state => state.customer.provinceAndCity
      provinceAndCity(state){
        this.$set(this.formArr,0,{
          formLabel:'所在城市',
          searchName:'cityArr',
          dataType:'array',
          componentType:'Cascader',
          changeOnSelect:false,
          optionsArr:state.customer.provinceAndCity,
          defaultProps:{
            label:'name',
            value: 'id',
            children: 'city'
          }
        })
      }

    }),
    mounted: function () {
//      this.loadProvinceAndCity();
      this.$store.dispatch('loadProvinceAndCity').then(()=>{
          return this.provinceAndCity
      });

      this.loadSiteData();
    },

    activated(){
      this.loadListPage(1);
    },

    filters:{
      sellerType(value) {
        switch (value) {
          case 'SELFSTORE': return '自营店铺';
          case 'THREESTORE': return '三方店铺';
        }
      }
    },
    methods :{
      fun_call_search(search,input) {
        this.searchInfo.cityId = search.cityArr[search.cityArr.length - 1];
        this.searchInfo.siteId = search.siteArr[search.siteArr.length - 1];
        this.searchInfo.search = input;

        this.loadListPage(1)
      },
      loadSiteData() {
        this.$store.dispatch('loadSiteTree',{fields:'id,name'}).then((data) => {
          let arr = [{id:'',name:'全部'}];
          if(data.data.children){
            for(var i=0;i<data.data.children.length;i++) {
              let item = data.data.children[i];
              if(item.children && item.children.length>0) {
                arr.push(item);
              }
            }
          }
          this.$set(this.formArr,1,{
            formLabel:'服务站点',
            searchName:'siteArr',
            dataType:'array',
            componentType:'Cascader',
            changeOnSelect:false,
            optionsArr:arr ,
            defaultProps:{
              label:'name',
              value: 'id',
              children: 'children'
            }
          })

        });
      },
      loadProvinceAndCity() {
        this.$store.dispatch('loadProvinceAndCity').then((data) => {
          this.$set(this.formArr,0,{
            formLabel:'所在城市',
            searchName:'cityArr',
            dataType:'array',
            componentType:'Cascader',
            changeOnSelect:false,
            optionsArr:this.provinceAndCity ,
            defaultProps:{
              label:'name',
              value: 'id',
              children: 'city'
            }
          })
        });
      },
      loadListPage (page) {
        if (page) {
          this.searchInfo['page.pn'] = page;
        }
        if (!this.detailDialogVisible && !this.formDialogVisible) {
          this.isLoading = true;
        }
        customerService.loadSellerListServer(this.searchInfo, (data) => {
          this.tableData = data.data;
          this.isLoading = false;
        });
      },
      openDetail (row) {
        this.sellerId = row.sellerId;
        this.detailDialogVisible = true;
      },
      openAddForm () {
        this.isAdd = true;
        this.formDialogVisible = true;
      },
      openEditForm (sellerDetail) {
        this.isAdd = false;
        this.sellerDetail = sellerDetail;
        this.formDialogVisible = true;
      },

      closeCustomerForm () {
        this.formDialogVisible = false;
        this.detailDialogVisible = false;
      },
    },

    data () {
      return {
        formArr:[],
        isLoading: false,
        detailDialogVisible: false,
        formDialogVisible: false,
        isAdd: true,
        sellerId: '',
        sellerDetail: {
          adminInfo: {},
          bankInfo: {},
          essentialInfo: {}
        },
        searchInfo: {
          search: '',
          cityId: '',
          siteId: '',
          'page.pn': 1,
          'page.size': 10
        },
        tableData: {
          elements: [],
          page: '',
          size: '',
          totalAmount: ''
        },
        breadcrumbData: {
          list: [
            { name: '客户管理', path: null, clickAble: false},
            { name: '商城客户', path: null, clickAble: false },
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'customer-icon',
        }
      }
    }
  }
</script>

<style lang="less">

</style>
